<template>
    <div class="leftTwo">
        <ThemeTitle :title="title"/>
        <div class="city">
            <div class="cityTitle">
                <div class="sideLine"></div>
                <div class="cityWord">地级行政区（4个）</div>
            </div>
            <div class="cityList">
                <div 
                    class="cityItem" 
                    v-for="(item,index) in cityList" 
                    :key="index"
                    @click="handleCityClick(item,index)"
                    :class="{'cityActive':item.isActive}"
                >
                    {{item.name}}
                </div>
            </div>
        </div>
        <div class="county">
            <div class="countyTitle">
                <div class="sideLine"></div>
                <div class="countyWord">县级行政区（15个）</div>
            </div> 
            <div class="countyList">
                <div 
                    class="countyItem" 
                    v-for="(item,index) in countyList" 
                    :key="index"
                    @click="handleCountyClick(item,index)"
                    :class="{'countyActive':item.isActive}"
                >
                    {{item.name}}
                </div>
            </div>             
        </div>
        <!-- <div>
            
        <div> -->
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide,
  reactive
} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import LayerManager from '../../../cesiumPlugin/layerManager'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const cityDec = {
            "海口市":"海口，别称“椰城”，海南省省会，国家“一带一路”战略支点城市，海南自由贸易港核心城市，地处海南岛北部，东邻文昌，西接澄迈，南毗定安，北濒琼州海峡，是海南省政治、经济、科技、文化中心和最大的交通枢纽。",
            "三亚市":"三亚市，是海南省地级市，简称崖，古称崖州，别称鹿城，地处海南岛的最南端。三亚东邻陵水县，西接乐东县，北毗保亭县，南临南海",
            "三沙市":"三沙市，是海南省地级市，地处中国南海中南部，海南省南部，辖西沙群岛、中沙群岛、南沙群岛的岛礁及其海域，陆地面积20多平方公里，总面积200多万平方公里",
            "儋州市":"儋州市，是海南省地级市。儋州市地处海南西北部，濒临北部湾，是海南西部的经济、交通、通信和文化中心",
            "五指山市":"五指山市是海南省直辖县级市，地处海南岛中南部腹地，是海南岛中部地区的中心城市和交通枢纽，也是海南省中部少数民族的聚居地。",
            "文昌市":"文昌，海南省下辖市，海南三大历史古邑之一，是中国著名的侨乡，是琼崖革命重要的根据地之一 [3]  ，海南闽南文化发源地，海南文昌航天发射中心所在地，是中国第四座航天之城",
            "琼海市":"琼海，海南省县级市，位于海南省东部，万泉河中下游",
            "万宁市":"万宁，海南省县级市，位于海南岛东南部，东临南海，西接琼中县，南和陵水县相邻，北和琼海市交界。",
            "东方市":"东方市，海南省下辖县级市，位于海南省西南部，北部湾东岸，昌化江下游，南及东南与乐东县接壤，北至东北隔昌化江与昌江黎族自治县交界，西临北部湾，与越南隔海相望，东靠黎母山脉。",
            "安定县":"定安县，海南省直辖县，位于海南岛的中部偏东北",
            "屯昌县":"屯昌县，海南省直辖县，位于海南岛中部偏北,建县时间不长，其前身新民县所辖地，历史上原是琼山、定安、澄迈三县的边区",
            "澄迈县":"澄迈县位于海南岛的西北部，环北部湾城市群的县，毗邻省会海口市,澄迈县先后获得“世界长寿之乡”、“中国绿色名县”、“中国最佳休闲旅游县”、“中国美丽乡村建设示范县”、“十大文化特色旅游名县”、“国家卫生县城” 等",
            "临高县":"临高县，是海南省直辖县，地处海南岛西北部，东邻澄迈县，西南与儋州市接壤，西北濒临北部湾，北濒琼州海峡，与雷州半岛隔海相望。",
            "白沙黎族自治县":"白沙黎族自治县，海南省下辖自治县，位于海南岛中西部，东与琼中县为依，东南与五指山市交界，南与乐东县相连，西与昌江县接壤，北与儋州市毗邻。",
            "昌江黎族自治县":"昌江黎族自治县是海南省直辖自治县，地处海南岛西部，总面积1569平方千米，下辖7镇1乡",
            "乐东黎族自治县":"乐东黎族自治县，是海南省直管自治县，位于海南岛西南部",
            "陵水黎族自治县":"陵水黎族自治县位于海南岛的东南部,是个以黎族、汉族、苗族人口居多的“大杂居，小聚居”的市县。",
            "保亭黎族自治县":"亭黎族苗族自治县，隶属于海南省，位于海南岛中部五指山南麓。地处海南省南部内陆",
            "琼中黎族自治县":"琼中黎族苗族自治县是海南省下辖的民族自治县之一，县境地处海南岛中部，五指山北麓，热带海洋季风气候，夏长无酷暑，冬短无严寒"
        }
        const cityCenter = {
            "海口市":[110.198418,20.045805],
            "三亚市":[109.511709,18.252865],
            "三沙市":[112.234483,16.774644],
            "儋州市":[109.580812,19.520948],
            "五指山市":[109.516784,18.774827],
            "文昌市":[110.797473,19.544234],
            "琼海市":[110.474524,19.259112],
            "万宁市":[110.392605,18.793697],
            "东方市":[108.651829,19.095187],
            "定安县":[110.358001,19.681215],
            "屯昌县":[110.101667,19.351662],
            "澄迈县":[110.007497,19.738885],
            "临高县":[109.690508,19.912025],
            "白沙黎族自治县":[109.4429,19.221641],
            "昌江黎族自治县":[109.055783,19.298139],
            "乐东黎族自治县":[109.173384,18.750063],
            "陵水黎族自治县":[110.037553,18.506045],
            "保亭黎族自治县":[109.700373,18.640156],
            "琼中黎族自治县":[109.838389,19.033369]
        }
        const title = provide("title","行政区划");
        const cityList = reactive([
            {name:'海口市',isActive:false},
            {name:'三亚市',isActive:false},
            {name:'三沙市',isActive:false},
            {name:'儋州市',isActive:false}
        ])
        cityList.forEach((item)=>{
            reactive(item)
        })
        let currentGeojson = '';
        const countyList = reactive([
            {name:'五指山市',isActive:false},
            {name:'文昌市',isActive:false},
            {name:'琼海市',isActive:false},
            {name:'万宁市',isActive:false},
            {name:'东方市',isActive:false},
            {name:'定安县',isActive:false},
            {name:'屯昌县',isActive:false},
            {name:'澄迈县',isActive:false},
            {name:'临高县',isActive:false},
            {name:'白沙黎族自治县',isActive:false},
            {name:'昌江黎族自治县',isActive:false},
            {name:'乐东黎族自治县',isActive:false},
            {name:'陵水黎族自治县',isActive:false},
            {name:'保亭黎族苗族自治县',isActive:false},
            {name:'琼中黎族苗族自治县',isActive:false}
        ])
        countyList.forEach((item)=>{
            reactive(item)
        })
        //初始化html样式
        let css3Elements = []
        const css3Renderer = new fmh.Css3Renderer(css3Elements,true)
        const handleCityClick = (item,index)=>{
            // if(currentGeojson){
            //     layerManager.removeGeojson(currentGeojson)
            // }
            cityList[index].isActive = !cityList[index].isActive
            if(cityList[index].isActive){
                layerManager.addBillboard("currentB",cityCenter[item.name][0],cityCenter[item.name][1],"/data/images/earth/local1.png")
                layerManager.addGeojson(`./data/geojson/${item.name}.json`)
                currentGeojson = `./data/geojson/${item.name}.json`;
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'box5',
                        position: [cityCenter[item.name][0],cityCenter[item.name][1],10],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='box5'>
                                        <div class='line'></div>
                                        <div class='main'>
                                            <div style="color:rgba(55,220,255,1);line-height:20px;font-size:14px;">
                                                ${cityDec[item.name]}
                                            </div>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },3000)
                
            }else{
                if(currentGeojson){
                    layerManager.removeGeojson(currentGeojson)
                }
                css3Renderer.removeEntityLayer('box5')
                layerManager.removeBillboard("currentB")
            }
        }
        const handleCountyClick = (item,index)=>{
            if(currentGeojson){
                layerManager.removeGeojson(currentGeojson)
            }
            countyList[index].isActive = !countyList[index].isActive
            if(countyList[index].isActive){
                layerManager.addBillboard("currentB",cityCenter[item.name][0],cityCenter[item.name][1],"/data/images/earth/local1.png")
                layerManager.addGeojson(`./data/geojson/${item.name}.json`)
                currentGeojson = `./data/geojson/${item.name}.json`;
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'box5',
                        position: [cityCenter[item.name][0],cityCenter[item.name][1],10],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='box5'>
                                        <div class='line'></div>
                                        <div class='main'>
                                            <p style="color:rgba(55,220,255,1);line-height:20px;font-size:16px;">
                                                ${cityDec[item.name]}
                                            </p>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },3000)
            }else{
                if(currentGeojson){
                    layerManager.removeGeojson(currentGeojson)
                }
                css3Renderer.removeEntityLayer('box5')
                layerManager.removeBillboard("currentB")
            }
        }
        onMounted(()=>{
            
        })
        return {
            title,
            cityList,
            countyList,
            handleCityClick,
            handleCountyClick,
        }
    }
}
</script>
<style>
    .ex-box{
        width: 200px;
        line-height: 30px;
        background-color: rgba(0,0,0,0.8);
        color:#fff;
        padding: 8px 20px;
        pointer-events: none;
    }
</style>
<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .leftTwo
        margin-top:vh(25)
        .city
            .cityTitle
                margin-top:vh(22)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .cityWord
                    color:#00EAFF
                    font-size:vw(16)
            .cityList
                display:flex
                margin-top:vh(15)
                margin-bottom:vh(10)
                margin-left:vw(12)
                justify-content :space-between
                .cityItem
                    flex-shrink:0
                    width: vw(78)
                    height: vh(32)
                    line-height:vh(32)
                    text-align:center
                    font-size:vw(14)
                    background: #022D40
                    border: 1px solid #0A4D6A
                    cursor: pointer
                .cityActive
                    background:#1398CF
        .county
            .countyTitle
                margin-bottom:vh(15)
                margin-top:vh(24)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .countyWord
                    color:#00EAFF
                    font-size:vw(16)
            .countyList
                display:flex
                flex-wrap:wrap
                margin-left:vw(1)
                .countyItem
                    flex-shrink:0
                    min-width: vw(78)
                    margin-bottom:vh(12)
                    margin-left:vw(10)
                    padding-left:vw(5)
                    padding-right:vw(5)
                    height: vh(32)
                    line-height:vh(32)
                    text-align:center
                    font-size:vw(14)
                    background:  #022D40
                    border: 1px solid #0A4D6A
                    cursor: pointer
                .countyActive
                    background:#1398CF

            
</style>